
.jmv-editor-panel {
    background-color: #F8F8F8;
    height: 270px;
    bottom: 0px;
    width: 100%;
    transition: height .2s, border-top .2s, opacity .2s;
    box-sizing: border-box;
    border-top: 1px solid #CCCCCC;
    position: absolute;
    box-shadow: 0px 0px 5px #bbbbbb;
}

.jmv-editor-panel.hidden {
    height: 0 ;
    transition-timing-function: ease, step-end ;
    border-top: 1px solid #F0F0F0 ;
    opacity: 0;
}

.jmv-editor-panel-main {
    position: relative ;
    margin: 0 auto ;
    width: 700px ;
    height: 100% ;
    box-sizing: border-box;
    overflow: hidden ;
    padding: 0 100px;
    display: flex;
    flex-direction: column;
}

.jmv-editor-panel-main .title-box {
    display: flex;
    flex-direction: row;
    padding: 0px 4px 0px 2px;
    margin: 6px 0 3px 0;
    align-items: center;
}

.jmv-editor-panel-ok {
    position: absolute ;
    right: 12px ;
    top: 12px ;
    width: 40px ;
    height: 40px ;
    color: #BBBBBB ;
    border: 4px solid #BBBBBB ;
    border-radius: 20px ;
    box-sizing: border-box;
    font-size: 24px ;
    text-align: center;
    z-index: 1 ;
    transition: color .2s, border-color .2s ;
}

.jmv-editor-panel-ok span.mif-checkmark {
    color: #AAAAAA ;
    border-color: #AAAAAA;
}

.jmv-editor-panel-ok.apply {
    border-color: #AAAAAA;
}

.jmv-editor-panel-ok span {
    position: absolute ;
    left: 0 ;
    width: 100% ;
    line-height: 32px;
    vertical-align: top;
    transition: opacity .4s ;
}

.jmv-editor-panel-ok:not(.apply) span.mif-checkmark {
    opacity: 0 ;
}

.jmv-editor-panel-ok.apply span.mif-arrow-up {
    opacity: 0 ;
}

.jmv-editor-panel-ok:hover {
    color: #999999 ;
    border-color: #999999 ;
}

.jmv-editor-panel-main .title {
    font-size: 110%;
    color: #555555;
    font-weight: 100;
}

.jmv-editor-panel-main > .content {
    flex-grow: 1;
}
